<template>
    <TableView class="table">
        <template #form>
            <NSpace justify="space-between">
                <NSpace align="center">
                    资产编号:
                    <NInput style="width: 200rem" placeholder="请输入资产编号" v-model:value="paginationReactive.assetNumber"
                        clearable />
                    资产名称:
                    <NInput style="width: 200rem" placeholder="请输入资产名称" v-model:value="paginationReactive.assetName"
                        clearable />
                    创建人:
                    <NInput style="width: 200rem" placeholder="请输入创建人" v-model:value="paginationReactive.createUserName"
                        clearable />
                    接收人:
                    <NInput style="width: 200rem" placeholder="请输入接收人" v-model:value="paginationReactive.receiveUserName"
                        clearable />
                    <NButton type="primary" style="width: 78rem" ghost
                        @click="() => ((paginationReactive.page = 1), getAssetsLogList())">
                        查询
                    </NButton>
                </NSpace>
            </NSpace>
        </template>

        <template #table="props">
            <NDataTable v-bind="props" :bordered="false" :columns="columns" :data="tableData" :pagination="false"
                :loading="tableLoading" />
        </template>

        <template #pagination>
            <NPagination :page-sizes="paginationReactive.pageSizes" :item-count="paginationReactive.itemCount"
                :page="paginationReactive.page" :page-size="paginationReactive.pageSize"
                @update:page="paginationReactive.onChange" @update:page-size="paginationReactive.onUpdatePageSize"
                show-size-picker show-quick-jumper :suffix="() => '页'">
                <template #prefix>
                    <span style="font-size: 14px;"> 共{{ paginationReactive.itemCount }}条</span>
                </template>
            </NPagination>
        </template>
    </TableView>

    <NModal :auto-focus="false" v-model:show="modalVisible" @close="modalVisible = false">
        <VDialogContent @close="modalVisible = false" @submit="modalVisible = false" title="详情">
            <div class="log_list">
                <div class="log_list_item" v-for="(item, index) in modalLogDetail">{{ item }}</div>
            </div>
        </VDialogContent>
    </NModal>
</template>
<script setup lang="ts">
import { NSpace, NButton, NDataTable, NPagination, useMessage, NModal, NInput } from 'naive-ui'
import { h, reactive, ref, watch, onDeactivated } from 'vue'
import { sendRequest } from '@/utils/api'
import { useRoute } from 'vue-router'
import type { DataTableColumns } from 'naive-ui'
import TableView from '@/components/TableView.vue'
import VDialogContent from '@/views/OA/Common/DialogContent.vue'
import { useViewerStore } from '@/views/OA/Common/store'

const useStore = useViewerStore()
const message = useMessage()
const route = useRoute()
const modalVisible = ref(false)
const modalLogDetail = ref([])
const columns: DataTableColumns = [
    {
        title: '资产编号',
        key: 'assetNumber',
        width: 60,
        align: useStore.isCenter
    },
    {
        title: '资产名称',
        key: 'assetName',
        width: 60,
        align: useStore.isCenter
    },
    {
        title: '状态变更',
        key: 'updateType',
        width: 60,
        align: useStore.isCenter
    },
    {
        title: '创建人',
        key: 'createUserName',
        width: 60,
        align: useStore.isCenter
    },
    {
        title: '接收人',
        key: 'receiveUserName',
        width: 60,
        align: useStore.isCenter
    },
    {
        title: '变更时间',
        key: 'createTime',
        width: 60,
        align: useStore.isCenter
    },
    {
        title: '操作',
        key: 'action',
        align: useStore.isCenter,
        width: 60,
        fixed: 'right',
        render: (row: any) => [
            row.updateType === '编辑' && h(
                NButton,
                {
                    type: 'primary',
                    quaternary: true,
                    onClick: async () => {
                        modalLogDetail.value = row.updateInfoList
                        modalVisible.value = true
                    }
                },
                {
                    default: () => '详情'
                }
            )
        ]
    }
]
// 上一页下一页
const paginationReactive = reactive({
    page: 1,
    pageSize: 10,
    pageSizes: [10, 20, 50, 100, 500],
    itemCount: 0,
    assetInfoId: null, // 从别的页面带过来的id
    assetNumber: null, //资产编号
    assetName: null, //资产名称
    createUserName: null, //创建人
    receiveUserName: null, //接收人
    onChange: (page: number) => {
        paginationReactive.page = page
        getAssetsLogList()
    },
    onUpdatePageSize: (pageSize: number) => {
        paginationReactive.pageSize = pageSize
        paginationReactive.page = 1
        getAssetsLogList()
    }
})
// 获取列表
const tableData: any = ref([])
const tableLoading = ref(false)
const getAssetsLogList = async () => {
    tableLoading.value = true
    const [error, res] = await sendRequest({
      module: 'assetsManagement',
      api: 'getAssetsLogList',
      override: {
        params: {
          page: paginationReactive.page,
          limit: paginationReactive.pageSize,
          assetNumber: paginationReactive.assetNumber,
          assetName: paginationReactive.assetName,
          createUserName: paginationReactive.createUserName,
          receiveUserName: paginationReactive.receiveUserName,
          assetInfoId: paginationReactive.assetInfoId
        }
      }
    })
    tableLoading.value = false
    if (error) return message.error(error.message)
    if (res.code !== 0) return message.error(res.msg)
    tableData.value = []
    setTimeout(() => {
      tableData.value = res.data.list
      paginationReactive.itemCount = res.data.totalCount
    }, 0)
}

const keyUpDown = (e: any) => e.key == 'Enter' && getAssetsLogList()
onDeactivated(() => window.removeEventListener('keyup', keyUpDown, false))

watch(
    () => route,
    async () => {
        if (route.path == '/OA/Assets/AssetsLog') {
            if(route.query.id) {
                paginationReactive.assetInfoId = (route.query.id as any)
            }
            getAssetsLogList()
            window.addEventListener('keyup', keyUpDown, false)  // 回车
        }
    },
    { deep: true, immediate: true }
)

</script>
<style scoped lang="scss">
.table {
    padding: 29rem 30rem 42rem;
}

.log_list {
    width: auto;
    height: auto;
    min-height: 100px;
    max-height: 200px;
    overflow-y: scroll;
}

.log_list_item {
    width: 400px;
    border: 1px solid black;
    padding: 5px;
    margin-bottom: 10px;
}

.log_list::-webkit-scrollbar {
    display: none;
}
</style>
      